<template>
  <!-- 作者版权信息 -->
  <div class="text-sm text-gray-700 dark:text-gray-300 space-y-4 mt-6">
    <div class="flex items-center">
      <div class="flex-1 border-t border-dashed border-gray-400 dark:border-gray-600"></div>
      <span class="font-semibold mx-2">声明</span>
      <div class="flex-1 border-t border-dashed border-gray-400 dark:border-gray-600"></div>
    </div>
  </div>

  <div
    class="space-y-2 border border-dashed border-gray-400 dark:border-gray-600 rounded-lg p-4 sm:p-6 mt-6 text-sm"
  >
    <!-- 作者 -->
    <div><strong>本文作者：</strong> {{ article.author }}</div>

    <!-- 链接 -->
    <div>
      <strong>本文链接：</strong>
      <a
        :href="env.VITE_FRONTEND_URL + $route.path"
        target="_blank"
        class="text-blue-500 hover:underline break-words"
      >
        {{ env.VITE_FRONTEND_URL + $route.path }}
      </a>
    </div>

    <!-- 版权声明 -->
    <div class="flex items-start gap-2">
      <div>
        <strong>版权声明：</strong>
        本站所有文章除特别声明外，均采用
        <a
          href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh"
          target="_blank"
          class="text-blue-500 hover:underline"
        >
          CC BY-NC-SA 4.0
        </a>
        协议。转载请注明文章出处！
      </div>
    </div>
  </div>
  <div class="flex justify-between items-center mt-4 px-2" v-if="article.category">
    <!-- 左侧分类标签 -->
    <a
      :href="`/category/${article.category.id}`"
      class="inline-block border border-gray-300 rounded-lg px-3 py-1 text-sm text-gray-700 hover:bg-gray-300 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700 transition"
    >
      {{ article.category.categoryName }}
    </a>

    <!-- 右侧分享按钮 -->
    <div
      @click="copyToClipboard(article.title)"
      class="flex items-center gap-1 cursor-pointer text-sm text-blue-500"
    >
      <el-icon size="16"><Share /></el-icon>
      分享
    </div>
  </div>

  <div class="flex items-start gap-2 mt-4 px-2" v-if="article.tags && article.tags.length > 0">
    <a
      v-for="tag in article.tags"
      :key="tag.id"
      :href="`/tag/${tag.id}`"
      class="inline-block border border-gray-300 rounded-lg px-3 py-1 text-sm text-gray-700 hover:bg-gray-300 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-700 transition"
    >
      {{ tag.tagName }}
    </a>
  </div>
</template>
<script lang="ts" setup>
import { Share } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router'
import { toClipboard } from '@soerenmartius/vue3-clipboard'
const route = useRoute()
defineProps<{
  article: {
    author: string
    category?: { id: number | string; categoryName: string }
    tags?: Array<{ id: number | string; tagName: string }>
  }
}>()
const env = import.meta.env
const fullUrl = computed(() => env.VITE_FRONTEND_URL + route.path)

// 分享按钮点击事件
function copyToClipboard(title: string) {
  const content = `欢迎访问博客文章：${title} \n通往地址：${fullUrl.value}`
  toClipboard(content)
    .then(() => {
      ElMessage.success('文章链接已复制到剪贴板！')
    })
    .catch(() => {
      ElMessage.error('复制失败')
    })
}
</script>
